<template>
  <view class="page-wrapper">
    <!-- 搜索栏头部 -->
    <view class="search-title">
      <view class="search-input" @tap="go.toSearchPage('mchApplyment')" >
        <image src="/static/iconImg/icon-search.svg" mode="scaleToFill" class="search-img" />
        <input placeholder="搜索进件单号"  disabled  placeholder-class="input-placeholder" />
      </view>
      <view class="search-state flex-center" @tap="statePopup.open(vdata.searchData.state)"> 
	  {{ vdata.selected.label || '全部状态' }}
	    <image src="/static/iconImg/icon-arrow-black.svg" mode="scaleToFill" />
	  </view>
    </view>
	
	<JeepayTableList ref="jeepayTableListRef" :reqTableDataFunc="reqTableDataFunc" :searchData="vdata.searchData" >
		<template #tableBody="{ record }">
			<MchApplymentRender :record="record" />
		</template>
	</JeepayTableList>
	
	
	<!-- 底部固定按钮 -->
	<view class="list-footer">
		<view class="button-wrapper">
			<Button @tap="toSelectIfCodePage">发起进件</Button>
		</view>
	</view>
	
	<JSinglePopup :list="stateList" title="按状态筛选" ref="statePopup" @confirm="confirmState" />
	
	
	<!-- 选择支付 接口 -->
	<JeepayPopupListSelect
	  ref="selectIfcodeRef"
	  title='请选择渠道'
	  :reqTableDataFunc="reqTableDataByIfcodeFunc"
	  :fields="{ key: 'ifCode', left: 'ifName', right: 'ifCode' }"
	  @confirm="confirmIfCode"
	>
	
	<!-- 小程序， 插槽不生效， 待排查！  TODO -->
	<!-- 详见： https://ask.dcloud.net.cn/question/158765  -->
	<!-- JeepayPopupListSelect.js  修改 "content-" + i0,  改为： content 即可。    -->
	
	 <!-- #ifdef APP-PLUS || H5 -->
		  <template #content="{record}">
			   <view class="pay-wrapper">
				 <view class="pay-info">
				   <view class="pay-logo flex-center" :style="{ backgroundColor: record.bgColor }">
					 <image :src="record.icon" mode="scaleToFill" />
				   </view>
				   <view>
					 <view class="pay-title">{{ record.ifName }}</view>
				   </view>
				 </view>
			   </view>
		  </template>
		  <!-- #endif -->
	
	</JeepayPopupListSelect>
	
  </view>
</template>

<script setup>

import { reactive, ref, computed, provide  } from "vue"
import { onReachBottom, onUnload } from '@dcloudio/uni-app'
import go from '@/commons/utils/go.js'
import ak from '@/commons/utils/ak.js'
import { reqLoad, API_URL_MCH_APPLYMENT_LIST, $getAllAllowApplymentIfCodeList } from "@/http/apiManager.js"
import MchApplymentRender from '@/pages/list/render/MchApplymentRender.vue'

onReachBottom(() => { })


const statePopup = ref(null)
const jeepayTableListRef = ref()
const selectIfcodeRef = ref()


// // 监听 更新事件 
onUnload(() => uni.$off(ak.emit.ENAME_REF_APPLYMENT_LIST))
uni.$on(ak.emit.ENAME_REF_APPLYMENT_LIST, function(data){
	jeepayTableListRef.value.refTable(true)
})


const vdata = reactive({
	searchData: {},
	selected: {} , // 当前选择对象
	
	addIfCodeList: [], // 可以选择的接口集合
})

const stateList = reactive([
  { label: '全部', value: '' },
  { label: '草稿', value: '0' },
  { label: '审核中', value: '1' },
  { label: '进件成功', value: '2' },
  { label: '驳回待修改', value: '3' },
  { label: '待验证', value: '4' },
  { label: '待签约', value: '5' },
  // { label: '等待预审', value: '7' },
  // { label: '预审拒绝', value: '8' },
])


// 请求
function reqTableDataFunc (params) {
    return reqLoad.list(API_URL_MCH_APPLYMENT_LIST, params)
}

//按状态筛选
function confirmState(r){
	vdata.selected = r || { }
	vdata.searchData.state = r.value
	jeepayTableListRef.value.refTable(true)
}


// 打开选择渠道页面
function toAddPage(){
	
	$getAllAllowApplymentIfCodeList().then(({bizData}) => {
		vdata.addIfCodeList = bizData.filter(v=>{
      return v.isOpenApplyment == 1
    })  
		selectIfcodeRef.value.open()
	})
}

// 请求可以选择的支付渠道 
function reqTableDataByIfcodeFunc(){
	// 模拟请求数据 
	return Promise.resolve({ bizData: { records: vdata.addIfCodeList, hasNext: false }})
}

function confirmIfCode(selected){
	if(!selected){
		ak.infoBox.showToast('请选择进件渠道')
		return false;
	}
	selectIfcodeRef.value.close()
	ak.go.to('PAGES_APPLYMENT_H5_DETAIL', {isView: 0, ifCode: selected.ifCode })
}
// 页面跳转  选择 应用渠道
function toSelectIfCodePage(){
    ak.go.to('PAGES_APPLYMENT_SELECETDPAY')
}

</script>

<style lang="scss" scoped>
.page-wrapper {
  min-height: calc(100vh - 80rpx);
  //   搜索栏样式
  .search-title {
    display: flex;
    align-items: center;
    padding: 0 30rpx;

    height: 110rpx;
    .search-input {
      flex: 1;
      display: flex;
      align-items: center;
      height: 70rpx;
      background-color: #fff;
      border-radius: 12rpx;
      .search-img {
        padding: 22rpx;
        width: 26rpx;
        height: 26rpx;
      }
    }
    .search-state {
      margin-left: 40rpx;
      font-size: 30rpx;
      color: #222425;
      image {
        margin-left: 10rpx;
        width: 40rpx;
        height: 40rpx;
        transform: rotate(180deg);
      }
    }
  }

}

.pay-wrapper {
  display: flex;
  align-items: center;
  height: 170rpx;
  .dot {
    position: relative;
    width: 36rpx;
    height: 36rpx;
    border-radius: 50%;
    background-color: #d7d8d9;
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 50%;
      height: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background-color: #fff;
    }
  }
  .dot-active {
    background-color: #2980fd;
  }
  .pay-info {
    display: flex;

    .pay-logo {
      margin: 0 20rpx 0 0rpx;
      width: 90rpx;
      height: 90rpx;
      border-radius: $v-b-r20;
      background-color: #07112d;
      image {
        width: 50rpx;
        height: 50rpx;
      }
    }
    .pay-title {
      font-size: 30rpx;
      font-weight: 400;
    }
  }
}

</style>
